<script setup>
import { ref } from 'vue'
import List from '@/components/List.vue'
import Tabbar from '@/components/Tabbar.vue'
import { useState } from '@/hooks/useState'


const activeName = ref('a')
const { state, onSearch, onClear } = useState()
</script>

<template>
  <!-- <van-watermark v-if="state.config.website" :content="state.config.website" opacity="0.6" /> -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in state.config.banner" :key="item">
      <img :src="item">
    </van-swipe-item>
  </van-swipe>
  <van-notice-bar left-icon="volume-o" :scrollable="false">
    <van-swipe
      vertical
      class="notice-swipe"
      :autoplay="3000"
      :touchable="false"
      :show-indicators="false"
    >
      <van-swipe-item v-for="item in state.config.slogan" :key="item">{{ item }}</van-swipe-item>
    </van-swipe>
  </van-notice-bar>
  <van-search v-model.trim="state.config.keyword" placeholder="请输入搜索关键词" @search="onSearch" @clear="onClear" />
  <div class="content-card">
    <div class="card-header">
      <span>{{ state.config?.card?.text0 }}</span>
      <small>{{ state.config?.card?.text1 }}</small>
    </div>
    <div class="card-body">
      <van-tabs v-if="!state.searchData" v-model:active="activeName" swipeable>
        <van-tab v-if="state.tjData.length" title="推荐" name="a">
          <List :items="state.tjData"/>
        </van-tab>
        <van-tab v-if="state.dxData.length" title="电信" name="b">
          <List :items="state.dxData"/>
        </van-tab>
        <van-tab v-if="state.ltData.length" title="联通" name="c">
          <List :items="state.ltData"/>
        </van-tab>
        <van-tab v-if="state.ydData.length" title="移动" name="d">
          <List :items="state.ydData"/>
        </van-tab>
      </van-tabs>
      <List v-else :items="state.searchData"/>
    </div>
  </div>
  <Tabbar :activeMenu="0"/>
</template>

<style scoped lang="less">
.my-swipe  {
  .van-swipe-item {
    // height: 300px;
    img {
      width: 100%;
      object-fit: contain;
    }
  }
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.content-card {
  width: 96%;
  margin: 10px auto 0;
  background-color: #fff;
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    color: #fff;
    font-size: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-image: linear-gradient(160deg, #ff9000 20%, #ff5500 60%);
  }
}
</style>
